<template>
  <el-dialog
    :title="title"
    :visible="visible"
    @close="$emit('update:visible', false)"
  >
    <el-form :model="stuForm" :rules="stuRules" ref="stuFromData">
      <el-form-item label="头像" prop="headimgurl">
        <el-upload
          class="avatar-uploader"
          name="headimgurl"
          action="/api/students/uploadStuAvatar"
          :show-file-list="false"
          :on-success="uploadSuccess"
        >
          <img
            v-if="stuForm.headimgurl"
            :src="stuForm.headimgurl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="stuForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="班级" prop="class">
        <el-input v-model="stuForm.class" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="stuForm.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学历" prop="degree">
        <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="stuForm.city" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="项目地址" prop="productUrl">
        <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="stuForm.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">取 消</el-button>
      <el-button type="primary" @click="confirmClick('stuFromData')">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
/deep/.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      title: "",
      stuForm: {
        name: "",
        age: "",
        class: "",
        city: "",
        degree: "",
        description: "",
        productUrl: "",
        headimgurl: "",
      },
      stuRules: {
        name: [
          {
            required: true,
            message: "请输入名字",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "请输年龄",
            trigger: "blur",
          },
        ],
        class: [
          {
            required: true,
            message: "请输入班级",
            trigger: "blur",
          },
        ],
        degree: [
          {
            required: true,
            message: "请输入学历",
            trigger: "blur",
          },
        ],
        city: [
          {
            required: true,
            message: "请输入城市",
            trigger: "blur",
          },
        ],
        description: [
          {
            required: true,
            message: "请输入描述",
            trigger: "blur",
          },
        ],
        productUrl: [
          {
            required: true,
            message: "请输入项目地址",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    confirmClick(stuFromData) {
      //   console.log(this.$refs[stuFromData]);
      this.$refs[stuFromData].validate((valid) => {
        if (valid) {
          this.$emit("ok", this.stuForm);
          console.log("确定");
        }
      });
    },
    uploadSuccess(res) {
      console.log(res);
      if (res.state) {
        this.stuForm.headimgurl = res.headimgurl;
      } else {
        this.$message.error(res.msg + "-" + r.err);
      }
    },
    beforeUpload(res) {
      console.log(res);
    },
  },
};
</script>
